import React,{useEffect} from 'react';
import './RoomPage.css';
import ParticipantsSection from './ParticipantsSection/ParticipantsSection';
import VideoSection from './VideoSection/VideoSection';
import ChatSection from './ChatSection/ChatSection';
import RoomLabel from './RoomLabel';
import {connect} from 'react-redux';
import { getLocalPreviewAndInitRoomConnection } from '../../utils/webRTCHandler';
import Overlay from './Overlay';

//rafce 快捷方式
const RoomPage = ({roomId,identity,isRoomHost,showOverlay}) => {
  useEffect(() =>{
    getLocalPreviewAndInitRoomConnection(isRoomHost,identity,roomId)
  },[])
  return (
    <div className='room_container'>
      <ParticipantsSection/>
      <VideoSection/>
      <ChatSection/>
      <RoomLabel roomId={roomId}/>
      { showOverlay && <Overlay />}
    </div>
  )
}
const mapStateToProps = (state) => {
  return {
    ...state,
  }
};
export default connect(mapStateToProps) (RoomPage);